<template>
  <div class="pdfPages">
    <div class="header-tools">
      <div class="tools-left">
        <vi-checkbox
          class="pdf-checked"
          :checked="allChecked"
          @click="allPdf"
        >全选</vi-checkbox>
        <vi-checkbox
          class="pdf-checked"
          :checked="theChecked"
          @click="theAllPdf"
        >反选</vi-checkbox>
      </div>
      <div class="tools-right">
        <vi-button class="close-tools" @click="pdfCancle">
          <span>取消</span>
        </vi-button>
        <vi-button type="primary" class="save-tools" @click="pdfSave">
          <span>确认</span>
        </vi-button>
      </div>
    </div>
    <div class="pdf-cont">
      <ul>
        <li
          class="pdf-pages-list"
          :class="{'list-checked':item.checked}"
          @click="pdfPagesList(item)"
          v-for="(item, i) in pdfChildInfoList"
          :key="i">
          <status v-if="!item.imgLoad" class="pdfs-list-status" label=""></status>
          <img :src="`${windowHttp}/${item.filePath}`" @load="loadImage(item)" alt="">
<!--          <span class="pages-list-label">{{item.fileName.substring(item.fileName.length-1,0)}}{{item.fileName.substring(item.fileName.length-1,item.fileName.length)*1+1}}</span>-->
          <span class="pages-list-label">{{item.fileName}}</span>
          <vi-icon type="star" style="position: absolute;top: 5px;right: 10px;color:red;"></vi-icon>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import activeShowMinxin from "../../mixin/activeShow.mixin";
  import status from "../public/status";
  import bus from '../../libs/event-bus'
  export default {
    mixins: [activeShowMinxin],
    name: "pdfPages",
    props: [],
    components:{
      status
    },
    data() {
      return {
        theChecked: false
      }
    },
    mounted() {

    },
    methods: {
      pdfPagesList(data){
        this.theChecked = false
        this.$set(data,'checked',!data.checked)
      },
      pdfCancle(){
        this.setPreviewStatus(false)
        this.setShadowGrayData(null); // 截图临时数据置空
        this.setStatus(null);
        // let oldId = this.oldId
        // let fileId = this.fileId
        // this.setFileID(oldId); // 切换文件
        // this.setFileOldID(fileId)
        this.setLoadingLabel(`加载中...`);
        let url = `${this.$url.getRecognize.url}/${this.fileId}/pages?pageIndex=`,
          urlObj = this.$url.getRecognize;
        this.$http({ ...urlObj, url: url }).then(() => {
          this.setNeedRefreshList(true);
          this.setLoadingLabel(``);
        })
       /* let opt = _.cloneDeep(this.$url.fileAccess);
        opt.url = `${this.$url.fileAccess.url}/${this.fileId}`;
        this.$http( opt, { fileId: this.fileId } ).then(() => {
          // console.log(res);
        })
        bus.$emit('setTreeStatus', this.fileId)*/
      },
      async pdfSave(){
        let pageIndex = '';
        let filePage = 0;
        this.pdfChildInfoList.map((item, key)=> {
          if(item.checked){
            pageIndex += `${key+1},`;
            filePage ++;
          }
        })

        if(filePage === 0){
          this.pdfCancle();
          return
        }
        this.fileList.map(item=>{
          if(item.id === this.fileId){
            item.filePage = filePage
          }
        })
        let url = `${this.$url.getRecognize.url}/${this.fileId}/pages?pageIndex=${pageIndex.slice(0,-1)}`,
          urlObj = this.$url.getRecognize;
        this.setStatus(1); // 设置上传识别状态值
        let {state} = await this.$http({ ...urlObj, url: url })
        if(state.ok === 1){
          this.setPreviewStatus(false)
          bus.$emit('getProgress', this.fileId)
          bus.$emit('fileNoPage', {filePage:filePage, id:this.fileId})
        }
      },
      allPdf(){
        this.theChecked = false
        if(this.allChecked){
          this.pdfChildInfoList.map(item => {
            this.$set(item,'checked',false)
          })
        }else{
          this.pdfChildInfoList.map(item => {
            this.$set(item,'checked',true)
          })
        }
      },
      theAllPdf(){
        if(this.theChecked){
          this.theChecked = false
          return
        }
        this.theChecked = true
        this.pdfChildInfoList.map(item => {
          this.$set(item,'checked',!item.checked)
        })
      },
      loadImage(item){
        this.$set(item,'imgLoad',true)
      }
    },
    computed: {
      pdfChildInfoList(){
        let list = this.$store.state.activeFile.pdfChildInfo.list
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.theChecked = false
        list.map(item => {
          this.$set(item,'checked',true)
          this.$set(item,'imgLoad',false)
        })
        return list
      },
      windowHttp(){
        return window.GLOBAL_CONFIG.fastdfs
      },
      allChecked(){
        let $status = true
        this.pdfChildInfoList.map(item=>{
          if(!item.checked){
            $status = false
          }
        })
        return $status
      },
      oldId(){
        return this.$store.state.activeFile.oldId;
      },
      fileId(){
        return this.$store.state.activeFile.id;
      },
      fileList() {
        return this.$store.state.file.fileList;
      },
    }
  }
</script>

<style scoped lang="less">
  .pdfPages{
    width: 100%;
    height: 100%;
    .header-tools{
      position: relative;
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-grow: 0;
      flex-shrink: 0;
      .tools-left{
        .pdf-checked{
          height: 32px;
          line-height: 32px;
          margin: 0 3px 0 15px;
          &:first-child{
            margin: 0 3px 0 0;
          }
        }
      }
      .tools-right{
        .close-tools{
          margin: 0 5px;
          height: 32px;
        }
        .save-tools{
          margin: 0 5px;
          height: 30px;
        }
      }
    }
    .pdf-cont{
      height: calc(100% - 47px);
      background: white;
      overflow-y: auto;
      overflow-x: hidden;
      ul{
        margin: 0;
        padding: 0;
      }
      .pdf-pages-list{
        position: relative;
        list-style: none;
        display: inline-block;
        width: 210px;
        height: 300px;
        margin: 20px;
        user-select: none;
        border: 2px solid #d2d2d2;
        &.list-checked{
          border: 2px solid @primary;
        }
        img{
          width: 100%;
          height: 260px;
        }
        .pdfs-list-status{
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%,-50%);
        }
        .pages-list-label{
          display: inline-block;
          width: 100%;
          height: 36px;
          line-height: 36px;
          padding: 0 10px;
          text-align: center;
          background: #c5cedd;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
</style>
